<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>矿机监控面板</title>
    <style>
        body { font-family: Arial, sans-serif; background: #f4f4f4; margin: 20px; }
        h1 { text-align: center; }
        table { border-collapse: collapse; width: 100%; background: #fff; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
        th { background: #333; color: #fff; }
        tr:nth-child(even) { background: #f9f9f9; }
        .offline { background-color: #ccc; }  /* 离线灰色 */
        .temp-yellow { background-color: #ffff99; }  /* 温度>80黄 */
        .temp-red { background-color: #ff6666; }     /* 温度>90红 */
        .stats { margin: 20px 0; font-size: 16px; text-align: center; }
        .controls { text-align: right; margin-bottom: 10px; }
        .download-link { display: inline-block; padding: 6px 12px; background-color: #4CAF50; color: #fff; text-decoration: none; border-radius: 4px; }
        .download-link:hover { background-color: #45a049; }
    </style>
    <script>
        // 从 localStorage 获取自动刷新状态
        var autoRefresh = localStorage.getItem('autoRefresh') === 'true';

        function toggleRefresh() {
            autoRefresh = !autoRefresh;
            localStorage.setItem('autoRefresh', autoRefresh);
            document.getElementById("refreshBtn").innerText = autoRefresh ? "自动刷新已开启" : "开启自动刷新";
        }

        function refreshLoop() {
            if(autoRefresh) {
                setTimeout(() => location.reload(), 120000); // 2分钟刷新一次
            }
            setTimeout(refreshLoop, 2000); // 每2秒检查一次 autoRefresh 状态
        }

        window.onload = function() {
            document.getElementById("refreshBtn").innerText = autoRefresh ? "自动刷新已开启" : "开启自动刷新";
            refreshLoop();
        }
    </script>
</head>
<body>
    <h1>矿机监控面板</h1>

    <div class="stats">
        总矿机数：{{ total_machines }}
    </div>

    <div class="controls">
        <button id="refreshBtn" onclick="toggleRefresh()">开启自动刷新</button>
    </div>

    <h2>实时状态</h2>
    <table>
        <thead>
            <tr>
                <th>矿机名</th>
                <th>IP</th>
                <th>CPU</th>
                <th>内存</th>
                <th>CPU温度</th>
                <th>状态</th>
                <th>最后更新</th>
            </tr>
        </thead>
        <tbody>
            {% for name in visible_status.keys()|sort %}
            {% set ip, cpu, mem, temp, ts = visible_status[name] %}
            {% set age = now_ts() - ts %}
            <tr class="{% if age > 600 %}offline{% endif %}">
                <td>{{ name }}</td>
                <td>{{ ip }}</td>
                <td>{{ cpu }}%</td>
                <td>{{ mem }}%</td>
                <td class="{% if temp|float > 90 %}temp-red{% elif temp|float > 80 %}temp-yellow{% endif %}">{{ temp }}°</td>
                <td>{{ "离线" if age > 600 else "在线" }}</td>
                <td>{{ last_time_str(ts) }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <div style="text-align:center; margin-top:20px;">
        <a class="download-link" href="http://38.147.172.96/files/" target="_blank">下载文件</a>
    </div>
</body>
</html>
